<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>lzugis</title>
  <link rel="stylesheet" href="css/canvas.css" type="text/css">
  <style>
    body {
        background-color: black;
    }
  </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  let canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    hue = 217,
    count = 10000;

  let canvas2 = document.createElement('canvas'),
    ctx2 = canvas2.getContext('2d');
  canvas2.width = 100;
  canvas2.height = 100;
  let half = canvas2.width / 2,
    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
  gradient2.addColorStop(0.025, '#ffffff');
  gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
  gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
  gradient2.addColorStop(1, 'transparent');

  ctx2.fillStyle = gradient2;
  ctx2.beginPath();
  ctx2.arc(half, half, half, 0, Math.PI * 2);
  ctx2.fill();

  function random(min, max) {
    if (arguments.length < 2) {
      max = min;
      min = 0;
    }
    if (min > max) {
      var hold = max;
      max = min;
      min = hold;
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

for (let i = 0;i<count;i++) {
  const x = random(0, w),
    y = random(0, h),
    size = random(10, 100)
  ctx.drawImage(canvas2, x, y, size, size);
}
</script>
</body>
</html>